<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>毛茸治愈站</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" />
    <!-- 预加载字体图标，防止加载延迟 -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" as="style">
</head>
<body>
    <div class="app-container">
        <!-- 主页面 -->
        <div class="main-page active" id="main-page">
            <div class="header">
                <div class="logo">
                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="20" fill="#FF9494"/>
                        <circle cx="13" cy="16" r="3" fill="white"/>
                        <circle cx="27" cy="16" r="3" fill="white"/>
                        <path d="M14 24C16 27 24 27 26 24" stroke="white" stroke-width="2" stroke-linecap="round"/>
                        <path d="M8 14C8 14 5 8 8 6C11 4 13 8 13 8" stroke="#FF7070" stroke-width="2" stroke-linecap="round"/>
                        <path d="M32 14C32 14 35 8 32 6C29 4 27 8 27 8" stroke="#FF7070" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    <h1>毛茸治愈站</h1>
                </div>
            </div>
            
            <div class="pet-selector">
                <div class="option-card" data-type="cat">
                    <div class="option-icon">
                        <span class="material-symbols-rounded">pets</span>
                    </div>
                    <p>小猫咪</p>
                </div>
                <div class="option-card active" data-type="both">
                    <div class="option-icon">
                        <span class="material-symbols-rounded">favorite</span>
                    </div>
                    <p>全都要</p>
                </div>
                <div class="option-card" data-type="dog">
                    <div class="option-icon">
                        <span class="material-symbols-rounded">cruelty_free</span>
                    </div>
                    <p>小狗狗</p>
                </div>
            </div>
            
            <div class="card-container">
                <div class="swipe-instruction">
                    <div class="swipe-arrow left">
                        <span class="material-symbols-rounded">swipe_left</span>
                        <span>换一张</span>
                    </div>
                    <div class="swipe-arrow right">
                        <span>收藏</span>
                        <span class="material-symbols-rounded">swipe_right</span>
                    </div>
                </div>
                
                <div class="cards">
                    <!-- 卡片将通过API动态加载 -->
                </div>
                
                <div class="card-actions">
                    <div class="action-btn-container">
                        <button class="action-btn skip-btn">
                            <span class="material-symbols-rounded">close</span>
                        </button>
                        <span class="btn-label">换一张</span>
                    </div>
                    <div class="action-btn-container">
                        <button class="action-btn like-btn">
                            <span class="material-symbols-rounded">favorite</span>
                        </button>
                        <span class="btn-label">收藏</span>
                    </div>
                </div>
            </div>
            
            <div class="nav-button" id="show-favorites">
                <span class="material-symbols-rounded">collections_bookmark</span>
                <span>我的治愈收藏</span>
            </div>
        </div>
        
        <!-- 收藏页面 -->
        <div class="favorites-page" id="favorites-page">
            <div class="header">
                <button class="back-btn" id="back-to-main">
                    <span class="material-symbols-rounded">arrow_back</span>
                </button>
                <h1>我的治愈收藏</h1>
            </div>
            
            <div class="favorites-container">
                <!-- 收藏的照片将在这里显示 -->
            </div>
            
            <div class="empty-favorites">
                <span class="material-symbols-rounded">pets</span>
                <p>还没有收藏任何治愈萌宠，开始滑动发现你的减压小帮手吧！</p>
            </div>
        </div>
    </div>

    <div class="loading-screen visible">
        <div class="loader"></div>
        <p>正在寻找能治愈你心情的萌宠...</p>
    </div>

    <!-- 预览模态框 -->
    <div class="preview-modal">
      <div class="preview-content">
        <img src="" alt="预览图片" class="preview-image">
        <div class="preview-actions">
          <button class="preview-close">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            关闭
          </button>
          <button class="preview-download">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 15V3M12 15L8 11M12 15L16 11M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            在新窗口打开
          </button>
        </div>
      </div>
    </div>
    
    <!-- 长按提示 -->
    <!-- <div class="long-press-hint">长按图片在新窗口打开</div> -->

    <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 